define(['gitee'], function (gitee) {

    let bmTypeList = [];//分类集合
    let bmTagList = [];//标签集合  分类下的多级子分类
    let bmList = [];

    function recursionBookmark(bm, type, tag) {
        if (bm.a) { // 子分类文件夹
            for (let cbm of bm.a) {
                if (cbm.a) {
                    bmTagList.push({ name: cbm.b, type });
                    recursionBookmark(cbm, type, cbm.b);
                } else {
                    recursionBookmark(cbm, type, tag);
                }
            }
        } else if (bm.c) {//书签
            type && (bm.type = type);
            tag && (bm.tag = tag);
            bmList.push(bm);
        }
    }

    return {
        name: "bookmarks",
        data() {
            return {
                bmTypeList: [],
                bmTagList: [],
                bmList: [],
                checkedType: "",
                checkedTag: "",
                searchTxt: "",
                loading: false,
                bmSourceFilePath: "",
                bmSourceFile: {},
                bmSourceFiles: []
            }
        },
        watch: {
            checkedType(val) {
                this.checkedTag = "";
                this.bmTagList = bmTagList.filter(n => n.type === val);
                this.bmList = bmList.filter(n => n.type === val);
            }
        },
        methods: {
            search() {
                if (this.searchTxt === "") {
                    this.bmList = bmList.filter(n => n.type === this.checkedType);
                } else {
                    this.bmList = bmList.filter(
                        n => n.b.toUpperCase().indexOf(this.searchTxt.toUpperCase()) !== -1 ||
                            n.c.toUpperCase().indexOf(this.searchTxt.toUpperCase()) !== -1
                    );
                }

                this.checkedTag = "";
                this.searchTxt = "";
            },
            typeClick(type) {
                this.bmList = bmList.filter(n => n.type === type);
            },
            tagClick(tag) {
                let checkedTag = tag.name;
                if (tag.name === this.checkedTag) {
                    this.checkedTag = "";
                    checkedTag = "";
                }

                this.checkedTag = checkedTag;

                if (checkedTag === "") {
                    this.bmList = bmList.filter(n => n.type === this.checkedType);
                    return;
                }

                this.bmList = bmList.filter(bm => {
                    if (!bm.tag) {
                        return false;
                    }
                    return bm.tag === checkedTag;
                });
            },
            refreshData() {
                if (confirm('确认重新下载书签数据?')) {
                    this.checkedType = "";
                    this.checkedTag = "";
                    bmList = [];
                    bmTypeList = [];
                    bmTagList = [];
                    this.bmTypeList = [];
                    this.bmTagList = [];
                    this.bmList = [];
                    this.loadData(true);
                }
                return false;
            },
            loadData(refreshCache = false, call) {
                gitee.getFileContent("data/bm.chrome.home.json", refreshCache, true).then(data => {
                    this.bmDataHandle(data);
                    call && call();
                });
            },
            bmDataHandle(bmRoot) {
                // 书签栏书签集合 a = children b=title c=url
                let rootBmList = bmRoot.a;
                for (let bm of rootBmList) {
                    // 如果有子节点  则代表分类
                    if (bm.a) {
                        recursionBookmark(bm, bm.b, null);
                        bmTypeList.push(bm.b);
                    } else {
                        recursionBookmark(bm, null, null);
                    }
                }
                this.checkedType = bmTypeList[0];
                this.bmTypeList = bmTypeList;
                this.bmTagList = bmTagList;
                this.bmList = bmList;
                this.loading = false;
            }
        },
        mounted() {
            bmTypeList = [];
            bmTagList = [];
            bmList = [];
            this.loadData();
        },
        
        template: /*html*/`
        <div class="container pb-5 mb-5">
            <div class="alert alert-secondary mt-2" role="alert">
                Chrome浏览器书签，基于插件导出书签JSON数据在此页面展示
            </div>
            <div class="my-3 d-flex flex-row mx-1">
                <div class="d-flex flex-grow-1">
                    <input class="form-control" type="text" @keyup.enter="search" v-model="searchTxt" placeholder="搜索书签..."
                        autocomplete="off" />
                </div>
                <button type="button" @click="search" class="btn btn-primary mx-2"><i class="fa fa-search"></i></button>
                <button class="btn btn-primary ml-1" data-tooltip="下载书签" data-position="bottom left" @click="refreshData">
                    <i class="fa fa-download"></i>
                </button>
            </div>
            <div>
                <span class="fw-bold">分类：</span>
                <template v-for="type in bmTypeList">
                    <span class="badge m-1 yh-pointer" :class="checkedType==type ? 'bg-primary' :'bg-light' "
                        @click="checkedType=type">
                        {{type}}
                    </span>
                </template>
            </div>
            <div v-if="bmTagList.length>0"><span class="fw-bold">标签：</span>
                <span class="badge m-1 yh-pointer" :class="checkedTag==tag.name ? 'bg-primary' :'bg-light' "
                    v-for="tag in bmTagList" @click="tagClick(tag)">
                    {{tag.name}}
                </span>
            </div>
            <div class="list-group mt-3">
                <a href="#" class="list-group-item list-group-item-action d-inline text-nowrap overflow-hidden"
                    target="_blank" :href="bm.c" v-for="bm in bmList">
                    <span>{{bm.b}}</span>
                    <span class="badge bg-light mx-1">{{bm.c}}</span>
                    <span class="badge bg-info rounded-pill">{{bm.tag}}</span>
                </a>
            </div>
        </div>
        `
    }

});
